<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
<section id="chat">
    <div class="chatBody">
	</div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="../js/jquery.3.6.3.js"></script>
<script>
	
	var uName=new Array("时尚伊人","六月奇迹","松松");
	//点击发送获取chatText中的val
	$("#send").click(function(){
		let textVal = $(".chatText").val();
		
		//把聊天内容添加到.chatBody
		//获取当前聊天内容 
		//var声明的变量是全局的 let声明的变量是局部
		let str = $(".chatBody").html();
		//新聊天内容
		parseInt(Math.random()*3)
		let newStr = "<section><img src='images/head0"+(parseInt(Math.random()*3)+1)+".jpg' alt=''><p>"+uName[parseInt(Math.random()*3)]+"</p><div>"+textVal+"</div></section>"
		
		$(".chatBody").html(str + newStr);
		
		$(".chatBody").find("div").addClass("chatContent");
		//清除
		$(".chatText").val("");
	})
</script>
</body>
</html>